import React, { memo } from "react";
import { createStyles } from "antd-style";

import SkTable, { SkTableProps } from './SkTable';
import {ProAutoScrollbars} from "../../pro-autoScrollbars"

interface ContentProps extends SkTableProps {
  headerHeight: number;
  footerHeight: number;
  Empty?: React.FC;
}

const Content: React.FC<ContentProps> = ({ headerHeight, footerHeight, Empty, ...tableProps }) => {
  const { styles } = useStyle({ headerHeight, footerHeight });
  
  return (
    <div className={styles.content}>
      <ProAutoScrollbars>
        {(() => {
          if (!!Empty && !tableProps.loading && tableProps.dataSource.length == 0) {
            return <div className="center"><Empty /></div>
          }

          return (
            <SkTable
              {...tableProps}
            />
          )
        })()}
      </ProAutoScrollbars>
    </div>
  )
}


export default memo(Content);


const useStyle = createStyles(({ css }, { headerHeight, footerHeight }: { headerHeight: number, footerHeight: number }) => ({
  content: css`
    width: 100%;
    height: calc(100% - ${headerHeight + footerHeight}px);
    padding: 5px 0px;
    .center{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  `,
}))
